<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="待办任务" name="first">
      <el-form :inline="true" :model="form1" class="demo-form-inline">
        <el-row>
          <el-form-item label="访客姓名：">
            <el-input v-model="form1.user" placeholder="请输入访客姓名"></el-input>
          </el-form-item>
          <el-form-item label="访客手机号：">
            <el-input v-model="form1.phone" placeholder="请输入访客手机号"></el-input>
          </el-form-item>
          <el-form-item label="被拜访人：">
            <el-input v-model="form1.thename" placeholder="请输入被拜访人姓名"></el-input>
          </el-form-item>
          <el-form-item label="时间：">
            <el-date-picker
              v-model="form1.data"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchReset">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchQuery">查询</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <a-table :columns="columns" :dataSource="data"></a-table>
    </el-tab-pane>
    <el-tab-pane label="已办任务" name="second">
      <el-form :inline="true" :model="form2" class="demo-form-inline">
        <el-row>
          <el-form-item label="访客姓名：">
            <el-input v-model="form1.user" placeholder="请输入访客姓名"></el-input>
          </el-form-item>
          <el-form-item label="访客手机号：">
            <el-input v-model="form1.phone" placeholder="请输入访客手机号"></el-input>
          </el-form-item>
          <el-form-item label="被拜访人：">
            <el-input v-model="form1.thename" placeholder="请输入被拜访人姓名"></el-input>
          </el-form-item>

          <el-form-item label="时间：">
            <el-date-picker
              v-model="form1.data"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchReset">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchQuery">查询</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
const columns = [
  {
    title: "id",
    dataIndex: "key",
    key: "key"
  },
  {
    dataIndex: "name",
    key: "name",
    title: "访客姓名"
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  },
  {
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    scopedSlots: { customRender: "tags" }
  },
  {
    title: "Action",
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];
const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"]
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["loser"]
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"]
  },
  {
    key: "4",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"]
  },
  {
    key: "5",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"]
  },
  {
    key: "6",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"]
  },
  {
    key: "7",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"]
  },
  {
    key: "8",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"]
  },
  {
    key: "9",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"]
  },
  {
    key: "10",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"]
  },
  {
    key: "11",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"]
  }
];
import Vue from "vue";
import { Table } from "ant-design-vue";
Vue.use(Table);
export default {
  name: "appointment",
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      activeName: "first",
      form1: {
        user: "",
        phone: "",
        thename: "",
        data: []
      },
      form2: {
        user: "",
        phone: "",
        thename: "",
        data: []
      },
      columns,
      data
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    searchReset() {
      this.form1 = {};
    },
    searchQuery() {
      console.log(this.form1);
    }
  },
  computed: {}
};
</script>

<style scoped>
</style>

